<template>
	<view class="wf-box" :style="{ paddingTop: totalheight }">
		<view class="head" :style="{ paddingTop: navBarHeight }">
			<view class="head-np">
				<view class="back" @click="back()">
					<image src="../../static/img/chat-09.png"></image>
				</view>
				<view class="title">账号绑定</view>
				<view></view>
			</view>
		</view>
		<view class="head-title">
			<!-- :class="curTitle ? '' : 'act-head-title'" -->
			<view class="head-lact" v-if="!curTitle">
				<view @click="changeTitle(0)">
					<text>绑定原账号</text>
				</view>
				<view @click="changeTitle(1)">
					<text>手机号绑定</text>
				</view>
			</view>
			
			<view class="head-ract" v-else>
				<view @click="changeTitle(0)">
					绑定原账号
				</view>
				<view @click="changeTitle(1)">
					<text>手机号绑定</text>
				</view>
			</view>
			
			
			
			
		</view>
		<view class="main">
			<view class="main-ctr">
				<image src="../../static/img/meotc.png" class="otc-img"></image>
				<!-- <view class="otc-tit">OTC账号绑定</view> -->
				<view class="otc-warp-item">
					<image src="../../static/img/phone.png" class="item-icon"></image>
					<view class="item-tit">手机号</view>
					<input type="text" placeholder="请输入手机号" class="ml-ipt" v-model="phone">
				</view>
				
				<view class="otc-warp-item" v-if="curTitle">
					<image src="../../static/img/sign-04.png" class="item-icon"></image>
					<view class="item-tit">验证码</view>
					<input type="text" placeholder="请输入验证码" class="ml-ipt" v-model="code">
					
					<view @click="getCode" class="code-btn">{{ sendText }} <text v-if="codeFlage">({{ time }}s)</text></view>
				</view>
				
				<view class="otc-warp-item" v-if="!curTitle">
					<image src="../../static/img/sign-03.png" class="item-icon"></image>
					<view class="item-tit">登录密码</view>
					<input type="password" placeholder="请输入登录密码" class="ml-ipt" v-model="password">
				</view>
				
				<view class="otc-warp-item" v-if="!curTitle">
					<image src="../../static/img/sign-03.png" class="item-icon"></image>
					<view class="item-tit">资金密码</view>
					<input type="password" placeholder="请输入资金密码" class="ml-ipt" v-model="accountPassword">
				</view>
				
				<view class="footer-warp">
					<view @click="bindOtc">绑定</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import { bindAccountApi , sendBindCodeApi } from '@/api/api.js'
	import { throttle } from '@/utils/common.js'
	import HeadNav from "@/components/HeadNav"
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				curTitle: '',
				sendText: '获取验证码',
				codeFlage: false,
				time: 60,
				phone: '',
				password: '',
				accountPassword: '',
				code: ''
			}
		},
		mixins: [navBarMixin],
		components: {
			HeadNav
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			changeTitle(e) {
				this.curTitle = e
			},
			
			async getCode() {
				if(this.codeFlage) return
				if(!this.phone) {
					uni.showToast({
						title: '请先输入手机号码',
						icon: 'none'
					})
					return 
				}
				
				const res = await sendBindCodeApi({
					phone: this.phone
				})
				
				if(res.code) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
				
				this.codeFlage = !this.codeFlage
				
				this.sendText = '重新获取验证码'
				this.handleTimer()
			},
			handleTimer() {
				if(!this.time) {
					this.codeFlage = false
					this.time = 60
					return
				}
				
				this.timer = setTimeout(() => {
					this.time--
					this.handleTimer()
				},1000)
			},
			bindOtc() {
				let queryObj = ''
				if(this.curTitle) {
					queryObj = {
						phone: this.phone,
						code: this.code,
						type: 2
					}
				}else {
					queryObj = {
						phone: this.phone,
						password: this.password,
						accountPassword: this.accountPassword,
						code: '',
						type: 1
					}
				}
				
				throttle(async() => {
					// console.log('queryObj====',queryObj)
					const res = await bindAccountApi(queryObj)
					if(res.code) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}else {
						uni.showToast({
							title: '绑定成功',
							icon: 'none'
						})
						this.$store.dispatch("loadUser")
						
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/me/index'
							})
						},2000)
						
					}
				},4000)
				
			}
		},
		onLoad(options) {
		}
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		padding-bottom: 30rpx;
		overflow: hidden;
		.head {
			position: fixed;
			top: 0;
			z-index: 1;
			width: 100%;
			background: #F8F8F8;
			
			.head-np {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 96rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				
				.back {
					image {
						width: 20rpx;
						height: 37rpx;
					}
				}
			
				.title {
					font-size: 36rpx;
					font-weight: bold;
				}
				
				.add-icon {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
		
		.head-title {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			// background: red;
			.head-lact {
				display: flex;
				flex: 1;
				position: relative;
				view:first-child {
					position: absolute;
					width: 66%;
					padding-left: 108rpx;
					box-sizing: border-box;
					height: 100rpx;
					z-index: 12;
					background: url('../../static/img/bind-01.png');
					background-size: 100% 100%;
					color: #333;
					font-size: 32rpx;
					text {
						position: relative;
						&::after {
							content: '';
							position: absolute;
							bottom: -20rpx;
							left: 50%;
							transform: translateX(-50%);
							width: 36rpx;
							height: 4rpx;
							background: #3F93FF;
						}
					}
					
				}
				view:last-child {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					right: 0;
					bottom: 0;
					z-index: 10;
					padding-right: 64rpx;
					box-sizing: border-box;
					background: url('../../static/img/bind-02.png');
					position: absolute;
					text-align: right;
					color: #fff;
					font-size: 28rpx;
				}
			}
			
			.head-ract {
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				display: flex;
				flex: 1;
				position: relative;
				view:first-child {
					position: absolute;
					bottom: 0;
					width: 100%;
					padding-left: 64rpx;
					box-sizing: border-box;
					height: 80rpx;
					line-height: 80rpx;
					z-index: 10;
					background: url('../../static/img/bind-03.png');
					background-size: 100% 100%;
					color: #fff;
					font-size: 32rpx;
					
				}
				view:last-child {
					width: 66%;
					height: 100rpx;
					line-height: 80rpx;
					right: 0;
					bottom: 0;
					z-index: 12;
					// padding-right: 64rpx;
					box-sizing: border-box;
					background: url('../../static/img/bind-04.png');
					background-size: 100%;
					position: absolute;
					text-align: right;
					color: #000;
					font-size: 32rpx;
					padding-right: 110rpx;
					text {
						position: relative;
						&::after {
							content: '';
							position: absolute;
							bottom: -20rpx;
							left: 50%;
							transform: translateX(-50%);
							width: 36rpx;
							height: 4rpx;
							background: #3F93FF;
						}
					}
					
				}
				
			}
			
			view {
				line-height: 96rpx;
				color: #999;
				font-size: 28rpx;
				&.act-head-title {
					position: relative;
					font-size: 32rpx;
					color: #333;
					&::after {
						content: '';
						position: absolute;
						bottom: 10rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 50%;
						height: 6rpx;
						background: #3F93FF;
						border-radius: 4rpx;
					}
				}
				
			}
			
		}
		
		.main {
			padding: 0 30rpx;
			margin-top: 30rpx;
			.main-ctr {
				min-height: 1150rpx;
				padding: 0 30rpx;
				padding-top: 50rpx;
				padding-bottom: 80rpx;
				box-sizing: border-box;
				background: #fff;
				border-radius: 10rpx;
				.otc-img {
					display: block;
					margin: 0 auto;
					margin-bottom: 20rpx;
					width: 327rpx;
					height: 284rpx;
				}
				.otc-tit {
					margin-bottom: 40rpx;
					margin-top: 60rpx;
				}
				.otc-warp-item {
					display: flex;
					align-items: center;
					height: 118rpx;
					border-bottom: 2rpx solid #eee;
					.item-icon {
						width: 48rpx;
						height: 48rpx;
					}
					.item-tit {
						margin-left: 20rpx;
						margin-right: 20rpx;
						font-size: 28rpx;
					}
					
					.ml-ipt {
						flex: 1;
						height: 118rpx;
						line-height: 118rpx;
						margin-left: auto;
						text-align: right;
						font-size: 24rpx;
					}
					
					.code-btn {
						margin-left: 20rpx;
						color: #3F93FF;
						font-size: 28rpx;
						text-align: right;
					}
				}
				.footer-warp {
					padding: 0 20rpx;
					margin-top: 70rpx;
					view {
						height: 80rpx;
						line-height: 80rpx;
						background-color: #3F93FF;
						border-radius: 40rpx;
						text-align: center;
						font-size: 32rpx;
						color: #fff;
					}
				}
				
			}
		}
	}
</style>